<template>
  <div style="width: 100%">
    <el-input
      v-model="queryParams.searchWords"
      placeholder="请输入关键词，多个关键词用逗号隔开"
      class="input-with-select"
      size="large"
      style="width: 600px"
    >
      <template #prepend>
        <el-checkbox v-if="props.show_checkbox" style="width: 110px" v-model="queryParams.selected">
          排除已选
        </el-checkbox>
        <el-select
          v-model="queryParams.searchType"
          placeholder="搜索类型"
          size="large"
          style="width: 100px"
        >
          <el-option label="全部" value="0" key="0" />
          <el-option label="关键词" value="1" key="1" />
          <el-option label="标题" value="2" key="2" />
          <el-option label="作者" value="3" key="3" />
          <el-option label="摘要" value="4" key="4" />
          <el-option label="期刊名称" value="5" key="5" />
          <el-option v-if="props.show_original_text" label="原文" value="6" key="6" />
        </el-select>
      </template>
      <template #append>
        <el-button
          icon="Search"
          @click="onSearch()"
          style="width: 70px; height: 40px"
          v-if="props.show_query_button"
        />
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
import { ArticleQuery } from "./type";
const queryParams = reactive<ArticleQuery>({
  searchWords: "", //名称
  searchType: "0", //搜索类型
  selected: false,
});

const props = defineProps({
  show_checkbox: {
    type: Boolean,
    default: false,
  },
  show_query_button: {
    type: Boolean,
    default: true,
  },
  show_original_text: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["onSearch"]);

const onSearch = () => {
  // 确保emit的参数是正确的
  emit("onSearch", {
    searchWords: queryParams.searchWords,
    searchType: queryParams.searchType,
    selected: queryParams.selected,
  });
};
onMounted(async () => {});
</script>

<style scoped>
.input-with-select {
  display: flex;
  align-items: center;
}

.el-input-group--append > .el-input__wrapper {
  flex: 1;
  min-width: 100px; /* 搜索框更长 */
}

.el-select {
  margin-right: 10px; /* 调整选择框与输入框的间距 */
}

.el-button {
  height: 40px; /* 确保按钮高度与输入框一致 */
  margin-left: 10px; /* 调整按钮与输入框的间距 */
}

/* 媒体查询：小屏幕设备 */
@media (max-width: 768px) {
  .input-with-select {
    flex-direction: column;
  }

  .el-input-group--append > .el-input__wrapper {
    width: 100%;
    margin-bottom: 10px; /* 在小屏幕下增加间距 */
  }

  .el-select {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px; /* 在小屏幕下增加间距 */
  }

  .el-button {
    width: 100%;
    margin-left: 0;
  }
}
</style>
